<html>
	<head>
	<link rel="stylesheet" type="text/css" href="/css/style.css"/>
	</head>

	<body id="main">
		<div id="left_side" style="position:fixed;">
			<img src="/static/logo.png" style="width:100%;height:auto;"/>
			{{greeting}}
			<br />
			<form action="/upload" enctype="multipart/form-data" method="post">
				Image title: <input id="input" type="text" name="title" style="width: 90%;"/><br/>
				<div class="upload"><input type="file" name="img" style="font-size:120%"/></div>
				<input type="submit" name="submit" value="Submit" style="font-size:120%">
			</form>
			<h2>Browse all Images</h2>
			<a href="/browse/"><img src="static/browse.png"/></a>
			
		</div>

		<div id="right_side">			
		{% if userImages %}
			<table style="margin-left:auto;margin-right:auto;width:100%;"><tr>
			{% for img in userImages %}
				<td class="imageCell" style="font-size: 12px;width:100%;padding: 10px 0px;">
					<b>Title</b>: {{img.title}}<br/>
					<b>By</b>: {{img.author}}<br/>
					Uploaded {{img.upload_date|timesince}} ago<br/>
					<a href="/view/{{img.key}}">
					<img id="thumbnail" src="/thumb/{{img.key}}" title="Edit in pixlr"/></a>
				</td>
					</tr><tr>
			{% endfor %}
			</tr></table>
		{% endif %}
	</body>
</html>